<template>

    <el-checkbox-group v-model="value_c" v-bind="$attrs">
        <el-space wrap :size="[30,10]">
            <template v-for="op in options_c" :key="op.id">
                <el-checkbox
                    :label="op.id"
                    :border="border"
                >
                    {{op.title}}
                </el-checkbox>
            </template>
        </el-space>
    </el-checkbox-group>
</template>

<script setup lang="ts">

import {computed, defineProps, useAttrs} from "vue";

const props = withDefaults(defineProps<{
    options: any[],
    modelValue?: any[],
    border?: boolean,
}>(), {
    border: false
})



const emits = defineEmits<{
    (e: 'update:modelValue', val: string): void
}>()
const attrs = useAttrs() as any


const value_c = computed({
    get: () => {
        return props.modelValue
    },
    set: (val: any) => {
        emits("update:modelValue", val)
    }
})

// 将options中的id类型转为string
const options_c = computed(() => {
    return props.options.map(item => {
        return {id: String(item.id), title: item.title}
    })
})

</script>

<style scoped>

</style>